<template>
  <basic-container>
    <avue-tabs :option="tabsOption" @change="handleChange"></avue-tabs>

    <avue-crud :option="option" :search.sync="search" :table-loading="loading" :data="data" :page.sync="page"
      :permission="permissionList" v-model="form" ref="crud"
      @search-change="searchChange" @search-reset="searchReset"
      @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
      @refresh-change="refreshChange" @sort-change="sortChange" @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="primary" size="small" @click.stop="handleBtn('add')">新建商品</el-button>
      </template>
      <template slot-scope="{row}" slot="menu">
        <el-button v-if="permissionList.isOnBtn" size="small" type="text" @click.stop="handleSwitch(row)" >{{row.isEnable === 1?'下架':'上架'}}</el-button>
        <el-button v-if="permissionList.viewBtn" size="small" type="text" @click.stop="handleBtn('view',row)" >查看</el-button>
        <el-button v-if="permissionList.editBtn" size="small" type="text" @click.stop="handleBtn('edit',row)" >编辑</el-button>
        <el-button v-if="permissionList.delBtn"  size="small" type="text" @click.stop="handleDel(row)">删除</el-button>
      </template>

      <template slot-scope="{row}" slot="masterPic">
          <el-image style="width:40px;height:40px" :src="row.masterPic" @click="getqrCodeUrl(row.masterPic)"></el-image>
      </template>
    </avue-crud>

    <!-- 新建 -->
    <el-dialog
      :title="storeFormDialog.title"
      append-to-body
      :close-on-press-escape="false"
      :visible.sync="storeFormDialog.show"
      v-if="storeFormDialog.show"
      :before-close="beforeCloseStore"
    >
      <div style="height:700px;overflow-y: auto;overflow-x: hidden;">
        <el-form :model="storeForm" :rules="storeFormRules" :disabled="storeFormDialog.disabled" ref="storeForm" label-width="100px" size="small" class="demo-ruleForm">
          <el-row :gutter="20">
            <el-col :span="24" class="datailTit">1、商品主图信息</el-col>
            <el-col :span="12">
              <el-form-item label="商品名称" prop="name">
                <el-input v-model="storeForm.name" placeholder="请输入商品名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="商品主图" prop="masterPic">
                <el-upload
                  action="/api/blade-resource/oss/endpoint/put-file-public"
                  list-type="picture-card"
                  :limit="1"
                  :file-list="fileListmasterPic"
                  :http-request="httpRequestmasterPic"
                  :on-remove="removemasterPic"
                  :before-remove="beforeRemove"
                  :on-exceed="headExceedmasterPic"
                  :before-upload="beforeUpload"
                  :on-preview="imgPreview"
                  >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="商品轮播图" prop="slidePic">
                <el-upload
                  action="/api/blade-resource/oss/endpoint/put-file-public"
                  list-type="picture-card"
                  :limit="5"
                  :file-list="fileListslidePic"
                  :http-request="httpRequestslidePic"
                  :on-remove="removeslidePic"
                  :before-remove="beforeRemove"
                  :on-exceed="headExceedbotu"
                  :before-upload="beforeUpload"
                  :on-preview="imgPreview"
                  :on-success="imgSuccess"
                  ref="slidePic"
                  >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商品优先级" prop="sortNo">
                <el-input v-model="storeForm.sortNo" placeholder="请输入商品优先级" onkeyup="value=value.replace(/[^\d^\.]+/g,'');"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="24" class="datailTit">2、商品类目选择</el-col>
            <el-col :span="6">
              <el-form-item label="行业分类" prop="classIndustry">
                <el-select v-model="storeForm.classIndustry" placeholder="请选择行业分类" @change="changeClassIndustry">
                  <el-option :label="item.firstName" :value="item.firstCode" v-for="item in classIndustryArr" :key="item.firstCode"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="行业大类" prop="classSuper">
                <el-select v-model="storeForm.classSuper" placeholder="请选择行业大类" @change="changeClassSuper">
                  <el-option :label="item.secondName" :value="item.secondCode" v-for="item in classSuperArr" :key="item.secondCode"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="行业小类" prop="classSub">
                <el-select v-model="storeForm.classSub" placeholder="请选择行业小类" @change="changeClassSub">
                  <el-option :label="item.thirdName" :value="item.thirdCode" v-for="item in classSubArr" :key="item.thirdCode"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="品牌" prop="classBrand">
                <el-select v-model="storeForm.classBrand" placeholder="请选择品牌">
                  <el-option :label="item.fourthName" :value="item.fourthCode" v-for="item in classBrandArr" :key="item.fourthCode"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24" class="datailTit">3、型号规格</el-col>
            <el-col :span="24" >
              <avue-crud
                :option="guiGeOption"
                :data="storeForm.list"
                ref="guiGe"
                v-model="guiGeForm"
                @row-update="rowUpdateGG"
                @row-save="rowSaveGG"
                @row-del="rowDelGG"
                :permission="permissionGG" 
              >
              </avue-crud>
            </el-col>
            <el-col :span="24">
              <el-form-item label="库存总数">{{repertoryNum}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商品编码" prop="merchantCode">
                <el-input v-model="storeForm.merchantCode" placeholder="请输入商品编码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="兑换券" prop="isSupportCoupon">
                <el-radio-group v-model="storeForm.isSupportCoupon">
                  <el-radio :label="0">不支持兑换</el-radio>
                  <el-radio :label="1">支持兑换</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="storeForm.isSupportCoupon === 1">
              <el-form-item label="兑换券类型" prop="couponType">
                <el-select v-model="storeForm.couponType" placeholder="请选择兑换券类型">
                  <el-option :label="item.dictValue" :value="item.dictKey" v-for="item in couponTypeArr" :key="item.dictKey"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24" class="datailTit">4、物流信息</el-col>
            <el-col :span="24">
              <el-form-item label="发货方式" prop="express">
                <el-radio-group v-model="storeForm.express">
                  <el-radio :label="1">包邮</el-radio>
                  <el-radio :label="2">使用物流配送</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="storeForm.express === 2">
              <el-form-item label="配送费" prop="expressFee">
                <el-input v-model="storeForm.expressFee" onkeyup="value=value.replace(/[^\d^\.]+/g,'');value=value.toString().match(/^\d+(?:\.\d{0,2})?/)"  placeholder="请输入配送费">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="划拨关系" prop="transferType">
                <el-radio-group v-model="storeForm.transferType">
                  <el-radio :label="1">自动划拨</el-radio>
                  <el-radio :label="0">不自动划拨</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24" class="datailTit">5、详情信息</el-col>
            <el-col :span="24">
              <el-form-item label-width="0" prop="detail">
                <avue-ueditor v-model="storeForm.detail" :options="ueditorOptions"></avue-ueditor>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24" class="datailTit">6、上架信息</el-col>
            <el-col :span="24">
              <el-form-item label-width="20px" prop="isEnable">
                <el-radio-group v-model="storeForm.isEnable">
                  <el-radio :label="1">立刻上架</el-radio>
                  <el-radio :label="0">放入商品库</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="storeClose">取 消</el-button>
        <el-button type="primary" size="small"  @click="storeSubmit" :disabled="sotreDisabled" v-if="storeFormDialog.type != 'view'" >保存</el-button>
      </span>
    </el-dialog>
    <!-- 图片预览 -->
    <el-image-viewer
      style="z-index: 2048"
      v-if="imgShow"
      :on-close="() => { imgShow = false; }"
      :url-list="[imgUrlList]"
    ></el-image-viewer>
  </basic-container>
</template>

<script>
import { mapGetters } from "vuex";
import canvasImg from '@/util/canvasImg';
import { uploadPublic } from "@/api/system/oss";
import { apiDetail,apiList,apiIsOn,apiAdd,apiDel,apiGGDel} from "@/api/rb-oem/shop/storeStore";
import { apiList as storeTypeList } from "@/api/rb-oem/shop/storeType";
import { getDictionary } from "@/api/system/dict";

export default {
  mixins: [canvasImg],
  data() {
    return {
      sotreDisabled:false,
      ueditorOptions: {
        //普通上传地址
        action: "/api/blade-resource/oss/endpoint/put-file",
        customConfig: {},//wangEditor编辑的配置
        props: {
          // home: '',
          res: "data",
          url: "link",
        }
      },
      tabsType: {},
      tabsOption: {
        column: [
          {
            label: "全部",
            prop: "2"
          },
          {
            label: "销售中",
            prop: "1"
          },
          {
            label: "仓库中",
            prop: "0"
          }
        ]
      },
      form: {},
      query: {},
      search: {},
      loading: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      option: {
        height: "calc(50vh - 50px)",
        calcHeight: 30,
        tip: false,
        border: true,
        index: true,
        viewBtn: false,
        editBtn: false,
        addBtn: false,
        delBtn: false,
        selection: false,
        searchMenuSpan: 24,
        columnBtn: false,
        labelWidth: 120, //弹出表单的标题的统一宽度
        searchLabelWidth: 90, //搜索框标题宽度
        emptyBtnText:'重置',
        column: [
          {
            label: "商品编号",
            prop: "code",
            type: 'input',
            hide:true
          },
          {
            label: "商品名称",
            prop: "name",
            type: 'input',
            search: true,
            overHidden: true,
            searchOrder: 5,
          },
          {
            label: "行业分类",
            prop: "classIndustryName",
            type: "input",
            //sortable: true,
            display: false,
          },
          {
            label: "行业大类",
            prop: "classSuperName",
            type: "input",
            //sortable: true,
            span: 24,
            rules: [{
              required: true,
              message: "请输入行业大类名称",
              trigger: "blur"
            }],
            display: false,
          },
          {
            label: "行业小类",
            prop: "classSubName",
            type: "input",
            //sortable: true,
            span: 24,
            rules: [{
              required: true,
              message: "请输入行业小类名称",
              trigger: "blur"
            }],
            display: false,
          },
          {
            label: "品牌",
            prop: "classBrandName",
            type: "input",
            //sortable: true,
            span: 24,
            rules: [{
              required: true,
              message: "请输入品牌",
              trigger: "blur"
            }],
            display: false,
          },

          {
            label: "行业分类",
            prop: "classIndustry",
            type: "select",
            span: 24,
            search: true,
            props: {
              label: 'firstName',
              value: 'firstCode',
            },
            cascaderItem: ['classSuper','classSub','classBrand'],
            dicUrl:'/api/rb-oem/oem/mall/mall_class/list?current=-1&size=-1&type=1',
            dicFormatter:(data)=>{
              return data.data.records
            },
            rules: [{
              required: true,
              message: "请选择行业分类",
              trigger: "blur"
            }],
            hide: true,
            searchOrder: 1,
          },
          {
            label: "行业大类",
            prop: "classSuper",
            type: "select",
            span: 24,
            search: true,
            props: {
              label: 'secondName',
              value: 'secondCode',
            },
            // cascader: ['classSub'],
            dicUrl:`/api/rb-oem/oem/mall/mall_class/list?current=-1&size=-1&type=2&firstCode={{key}}`,
            dicFormatter:(data)=>{
              return data.data.records
            },
            rules: [{
              required: true,
              message: "请选择行业大类",
              trigger: "blur"
            }],
            hide: true,
            searchOrder: 2,
          },
          {
            label: "行业小类",
            prop: "classSub",
            type: "select",
            span: 24,
            search: true,
            props: {
              label: 'thirdName',
              value: 'thirdCode',
            },
            // cascader: ['classBrand'],
            dicUrl:`/api/rb-oem/oem/mall/mall_class/list?current=-1&size=-1&type=3&secondCode={{key}}`,
            dicFormatter:(data)=>{
              return data.data.records
            },
            rules: [{
              required: true,
              message: "请选择行业小类",
              trigger: "blur"
            }],
            hide: true,
            searchOrder: 3,
          },
          {
            label: "品牌",
            prop: "classBrand",
            type: "select",
            span: 24,
            search: true,
            props: {
              label: 'fourthName',
              value: 'fourthCode',
            },
            dicUrl:`/api/rb-oem/oem/mall/mall_class/list?current=-1&size=-1&type=4&thirdCode={{key}}`,
            dicFormatter:(data)=>{
              return data.data.records
            },
            rules: [{
              required: true,
              message: "请选择行业小类",
              trigger: "blur"
            }],
            hide: true,
            searchOrder: 4,
          },
          
          {
            label: "是否支持积分",
            prop: "isSupportCoupon",
            type: "select",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            dataType: "string",
            dicUrl: "/api/blade-system/dict/dictionary?code=yes_or_no",
            minWidth:120
          },
          {
            label: "优先级",
            prop: "sortNo",
            type: 'input',
            overHidden: true
          },
          {
            label: "价格",
            prop: "defaultPrice",
            type: 'input',
            overHidden: true
          },
          {
            label: "库存",
            prop: "totalStore",
            type: 'input',
            overHidden: true
          },
          {
            label: "销售量",
            prop: "totalSale",
            type: 'input',
            overHidden: true
          },
          {
            label: "封面图",
            prop: "masterPic",
            type: 'input',
            overHidden: true
          },
          {
            label: "备注",
            prop: "remark",
            type: 'input',
            overHidden: true,
          },
          {
            label: "创建日期",
            prop: "createTime",
            type: 'input',
            overHidden: true,
            minWidth: 140
          }
        ]
      },
      data: [],
      
      imgShow: false,
      imgUrlList: [],

      storeFormDialog:{
        show:false,
        title:'',
        type:'',
        disabled:false
      },
      storeForm:{
        list:[],
        name:'',
        masterPic:'',
        slidePic:'',
        classIndustry:'',
        classSub:'',
        classSuper:'',
        classBrand:'',
        merchantCode:'',
        isSupportCoupon:'',
        couponType:'',
        express:'',
        expressFee:'',
        transferType:'',
        detail:'',
        isEnable:'',
        sortNo:''
      },
      storeFormRules:{
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
        ],
        sortNo: [
          { required: true, message: '请输入优先级', trigger: 'blur' },
        ],
        masterPic: [
          { required: true, message: '请上传商品主图', trigger: 'change' },
        ],
        slidePic: [
          { required: true, message: '请上传商品轮播图', trigger: 'change' },
        ],
        classIndustry: [
          { required: true, message: '请选择行业分类', trigger: 'blur' },
        ],
        classSub: [
          { required: true, message: '请选择行业大类', trigger: 'blur' },
        ],
        classSuper: [
          { required: true, message: '请选择行业小类', trigger: 'blur' },
        ],
        classBrand: [
          { required: true, message: '请选择品牌', trigger: 'blur' },
        ],
        merchantCode: [
          { required: true, message: '请输入商品编码', trigger: 'blur' },
        ],
        isSupportCoupon: [
          { required: true, message: '请选择是否支持兑换券', trigger: 'change' },
        ],
        couponType: [
          { required: true, message: '请选择兑换券类型', trigger: 'change' },
        ],
        express: [
          { required: true, message: '请选择发货方式', trigger: 'change' },
        ],
        expressFee: [
          { required: true, message: '请输入配送费', trigger: 'blur' },
        ],
        transferType: [
          { required: true, message: '请选择划拨关系', trigger: 'change' },
        ],
        detail: [
          { required: true, message: '请输入详情信息', trigger: 'change' },
        ],
        isEnable: [
          { required: true, message: '请选择是否上架', trigger: 'blur' },
        ],
      },
      guiGeForm:{},
      guiGeOption:{
        calcHeight: 30,
        tip: false,
        border: true,
        index: false,
        viewBtn: false,
        addBtn: true,
        editBtn: true,
        delBtn: false,
        selection: false,
        searchMenuSpan: 24,
        columnBtn: false,
        labelWidth: 120, //弹出表单的标题的统一宽度
        addBtnText:'新增规格型号',
        addBtnIcon:'none',
        refreshBtn:false,
        column: [
          {
            label: "规格名称",
            prop: "name",
            type: 'input',
            rules: [
              {
                required: true,
                message: '请输入规格名称',
                trigger: 'blur'
              }
            ],
          },
          {
            label: "销售价格",
            prop: "sellingPrice",
            type: 'number',
            controls: false,
            precision: 2,
            rules: [
              {
                required: true,
                message: '请输入销售价格',
                trigger: 'blur'
              }
            ],
          },
          {
            label: "积分价格",
            prop: "pointPrice",
            type: 'number',
            controls: false,
            precision: 2,
            rules: [
              {
                required: true,
                message: '请输入积分价格',
                trigger: 'blur'
              }
            ],
          },
          {
            label: "库存数量",
            prop: "repertoryNum",
            type: 'number',
            controls: false,
            precision: 0,
            rules: [
              {
                required: true,
                message: '请输入库存数量',
                trigger: 'blur'
              },
              {
                required: true,
                message: '请输入库存数量',
                trigger: 'blur'
              }
            ],
          },
          {
            label: "图片",
            prop: "pic",
            type: 'upload',
            listType: 'picture-img',
            action: '/api/blade-resource/oss/endpoint/put-file-public',
            loadText: '图片上传中，请稍等',
            limit: 1,
            fileSize: 10240,
            span: 24,
            propsHttp: {
              res: 'data',
              url: 'link'
            },
            tip: '只能上传jpg/png文件，且不且不超过10Mb',
            rules: [
              {
                required: true,
                message: '请上传图片',
                trigger: 'blur'
              }
            ]
          },
          {
            label: "是否默认",
            prop: "isDefault",
            type: 'number',
            controls: false,
            type: 'radio',
            value: 1,
            dicData: [{
              label: '否',
              value: 0
            }, 
            {
              label: '是',
              value: 1
            }],
            rules: [
              {
                required: true,
                message: '请选择是否默认',
                trigger: 'blur'
              }
            ],
            change: ({value}) => {
              let isEnable = this.findObject(this.guiGeOption.column, "isEnable");
              if (value) {
                this.guiGeForm.isEnable=1;
                isEnable.dicData[0].disabled = true;
              }else{
                isEnable.dicData[0].disabled = false;
              }
            },
            span: 24,
          },
          {
            label: "商品状态",
            prop: "isEnable",
            type: 'number',
            controls: false,
            type: 'radio',
            value: 1,
            dicData: [{
              label: '禁用',
              value: 0,
              disabled:true
            }, 
            {
              label: '启用',
              value: 1
            }],
            rules: [
              {
                required: true,
                message: '请选择商品状态',
                trigger: 'blur'
              }
            ],
            span: 24,
          },
        ]
      },
      
      fileListmasterPic:[],//商品主图
      fileListslidePic:[],//轮播图
      couponTypeArr:[],//券类型
      classIndustryArr:[],
      classSuperArr:[],//大类
      classSubArr:[],//小类
      classBrandArr:[],
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.storeStore_add, false),
        editBtn: this.vaildData(this.permission.storeStore_edit, false),
        viewBtn: this.vaildData(this.permission.storeStore_view, false),
        delBtn: this.vaildData(this.permission.storeStore_del, false),
        isOnBtn: this.vaildData(this.permission.storeStore_isOn, false)
      };
    },
    repertoryNum(){
        if (this.storeForm.list.length>0) {
          let repertoryNum = 0;
          this.storeForm.list.forEach(element => {
            if(element.repertoryNum){
              repertoryNum = element.repertoryNum*1 + repertoryNum*1 ;
            }
          });
          return repertoryNum
        }else{
          return 0
        }
    }
  },
  watch: {
    // 发货方式
    "storeForm.express"(val){
      if(val === 1){
        this.storeForm.expressFee = '';
      }
    },
    // 兑换券
    "storeForm.isSupportCoupon"(val){
      if(val === 0){
        this.storeForm.couponType = '';
      }
    }
  },
  created() {
    this.tabsType = this.tabsOption.column[0];
    this.doGetDicts()
  },
  methods: {
    initForm(){
      this.storeForm={
        list:[],
        name:'',
        masterPic:'',
        slidePic:'',
        classIndustry:'',
        classSub:'',
        classSuper:'',
        classBrand:'',
        merchantCode:'',
        isSupportCoupon:'',
        couponType:'',
        express:'',
        expressFee:'',
        transferType:'',
        detail:'',
        isEnable:'',
        sortNo:''
      }
      this.fileListmasterPic = [];
      this.fileListslidePic = [];
      this.sotreDisabled = false;
    },
    /* 字典 */
    doGetDicts() {
      getDictionary({ code: "coupon_type" }).then((res) => {
        this.couponTypeArr = res.data.data;
      });
    },

    // 选择行业分类
    changeClassIndustry(value){
      this.storeForm.classSuper="";
      this.storeForm.classSub="";
      this.storeForm.classBrand="";
      this.thirdCodeChange({firstCode:value})
    },
    // 选择行业大类
    changeClassSuper(value){
      this.storeForm.classSub="";
      this.storeForm.classBrand="";
      this.classSubChange({secondCode:value})
    },
    // 选择行业小类
    changeClassSub(value){
      this.storeForm.classBrand="";
      this.classBrandChange({thirdCode:value})
    },


    // 1行业分类
    classIndustryChange(){
      storeTypeList(-1,-1,{type:1}).then(res => {
        this.classIndustryArr = res.data.data.records;
      });
    },
    // 2行业大类
    thirdCodeChange(param={}){
      param.type=2;

      storeTypeList(-1,-1,param).then(res => {
        this.classSuperArr = res.data.data.records;
      });
    },
    
    // 3行业小类
    classSubChange(param={}){
      param.type=3;

      storeTypeList(-1,-1,param).then(res => {
        this.classSubArr = res.data.data.records;
      });
    },
    // 4品牌分类
    classBrandChange(param={}){
      param.type=4;

      storeTypeList(-1,-1,param).then(res => {
        this.classBrandArr = res.data.data.records;
      });
    },
     // 打开弹框 
     handleBtn(type,row={}){
      if(type=='add'){
        this.storeFormDialog = {
          show:true,
          title:'新建商品',
          type:'add',
          disabled:false
        }

        this.guiGeOption.menu=true;
        this.guiGeOption.addBtn=true;
        this.guiGeOption.editBtn=true;
        this.guiGeOption.delBtn=true;

        this.classIndustryChange();

      }else if(type=='edit'){
        this.storeFormDialog = {
          show:true,
          title:'编辑商品',
          type:'edit',
          disabled:false
        }

        this.guiGeOption.menu=true;
        this.guiGeOption.addBtn=true;
        this.guiGeOption.editBtn=true;
        this.guiGeOption.delBtn=true;
        
        this.getDetail(row)
        
      }else if(type=='view'){
        this.storeFormDialog = {
          show:true,
          title:'查看商品',
          type:'view',
          disabled:true
        }

        this.guiGeOption.menu=false;
        this.guiGeOption.addBtn=false;
        this.guiGeOption.editBtn=false;
        this.guiGeOption.delBtn=false;

        this.getDetail(row)

      }else{
        this.storeFormDialog.show = false;
      }
    },
    // 详情
    getDetail(row){
      let that = this;
      apiDetail({id:row.id}).then(res => {
        that.storeForm = res.data.data;
        that.storeForm.couponType = that.storeForm.couponType+'';
        this.fileListmasterPic = [{url:that.storeForm.masterPic}]//商品主图
        that.storeForm.slidePic.split(',').forEach(element => {//商品轮播图
          this.fileListslidePic.push({url:element})
        });

        // edit|view
        this.classIndustryChange()//1
        // 行业大类
        this.thirdCodeChange({firstCode:that.storeForm.classIndustry})//2
        //行业小类
        this.classSubChange({secondCode:that.storeForm.classSuper})//3
        // 品牌
        this.classBrandChange({thirdCode:that.storeForm.classSub})//4
      })
    },
    handleDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return apiDel(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    // 关闭弹框回调
    beforeCloseStore(done){
      this.$refs['storeForm'].resetFields();
      this.initForm();
      done()
    },
    storeClose(){
      this.$refs['storeForm'].resetFields();
      this.initForm();
      this.storeFormDialog.show = false;
    },
    // 新建---商品保存
    storeSubmit(){
      let that = this;
      this.$refs['storeForm'].validate((valid) => {
          if (valid) {
            if(that.storeForm.list.length<1){
              this.$message({
                  type: 'error',
                  message: '请添加型号规格'
                })
              return false;
            }else{
              let guiGeEnable = that.storeForm.list.some((item)=>{
                  return item.isEnable === 1;
              });

              if(guiGeEnable){
                that.sotreDisabled = true;
                apiAdd(that.storeForm).then((res)=>{
                  that.$refs['storeForm'].resetFields();
                  that.storeFormDialog.show = false;
                  that.initForm();
                  that.onLoad(this.page)
                },(error) =>{
                  that.sotreDisabled = false;
                })
              }else{
                this.$message({
                  type: 'error',
                  message: '3.型号规格，商品状态不能全部下架！！！'
                })
              }
            }
          } else {
            return false;
          }
        });
    },
    // 规格型号保存
    rowSaveGG(row, done, loading) {
      this.storeForm.list.unshift(row);
      if(row.isDefault === 1){
        this.storeForm.list.forEach((ele,indexs) =>{
          if(indexs!==0){
            ele.isDefault = 0;
          }
        })
      }
      done()
    },
    // 规格型号编辑
    rowUpdateGG(row, index, done, loading) {
      this.storeForm.list.splice(index,1,row)
      if(row.isDefault === 1){
        this.storeForm.list.forEach((ele,indexs) =>{
          if(index !== indexs){
              ele.isDefault = 0;
          }
        })
      }
      
      done()
    },
    // 规格型号删除
    rowDelGG(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          console.log('row.$index',row.$index,row)
          if(row.code){
            apiGGDel({code:row.code}).then(res => {
              if(res.data.code === 200){
                this.$message({
                type: 'success',
                message: res.data.msg
                })
                this.storeForm.list.splice(row.$index,1)
              }
            })
          }else{
            this.storeForm.list.splice(row.$index,1)
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          }
          
        })
    },
    // 轮播图上传
    httpRequestslidePic(option) {
      uploadPublic(option.file, option.file.name).then((res) => {
        this.fileListslidePic.push({url:res.data.data.link})
        
        let urlArr = []
        this.fileListslidePic.forEach(element => {//商品轮播图
          urlArr.push(element.url)
        });

        this.storeForm.slidePic = urlArr.join(',');
        
        // this.$refs.storeForm.validateField("slidePic");
      });
    },

    // 轮播图删除
    removeslidePic(file, fileList) {
      this.fileListslidePic = fileList;
      this.storeForm.slidePic = this.fileListslidePic.join(',');
    },
    /* 文件超出个数限制时的钩子 */
    headExceedbotu() {
      this.$message.error(`只能上传五张图片哦~`);
    },
    // 商品主图上传
    httpRequestmasterPic(option) {
      uploadPublic(option.file, option.file.name).then((res) => {
        this.storeForm.masterPic = res.data.data.link;
        // this.$refs.storeForm.validateField("masterPic");
      });
    },
    /* 文件超出个数限制时的钩子 */
    headExceedmasterPic() {
      this.$message.error(`只能上传一张图片哦~`);
    },
    // 商品主图删除
    removemasterPic(file, fileList) {
      this.fileListmasterPic = fileList;
      this.storeForm.masterPic = "";
    },
    // 删除图片前
    beforeRemove(){
      return this.$confirm(`确定移除这张照片？`);
    },
    
    /* 预览图片 */
    imgPreview(file) {
      this.imgUrlList[0] = file.url;
      this.imgShow = true;
    },
    /* 预览图片 */
    getqrCodeUrl(item) {
      this.imgUrlList[0] = item;
      this.imgShow = true;
    },
     /**
     * @func 商品上架状态
     * @desc 商品上架 下架
     * @param {Object} row - 商品信息
     * */
     handleSwitch(row) {
      let param ={
        id:row.id,
        isOn:row.isEnable===1?0:1
      }
      apiIsOn(param).then(() => {
        this.onLoad(this.page)
      })
    },
    // 状态选择
    handleChange(column) {
      this.tabsType = column;
      this.onLoad(this.page);
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;

      if(this.tabsType.prop !='2'){
        params.isEnable = this.tabsType.prop;
      }

      apiList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
    sortChange(val) {
      if (val.order == "ascending") {
        //正序
        this.query.ascs = val.prop
        this.query.descs = ""
      } else {
        //倒序
        this.query.descs = val.prop
        this.query.ascs = ""
      }
      this.refreshChange();
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-date-editor .el-range__close-icon{
  margin-right: 10px;
}
.flex{
  display :flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.blue{
  color: #409EFF;
  cursor: pointer;
}

// ::v-deep .el-form-item__content{
//   width: 100%;
// }
::v-deep .el-select{
  // width: calc(100% - 100px) !important;
  width: 100% !important;
}
.datailTit{
  padding-bottom: 10px;
}
</style>
